import React, { useEffect, useState } from "react"
import { flushSync } from "react-dom"
import { connect } from "react-redux";

import './Detail.less';

import { Badge, Toast, Image, Space, Rate } from 'antd-mobile'
import { LikeOutline, BellOutline, MoreOutline, StarOutline } from 'antd-mobile-icons'
import action from '@/store/action'

import GoBack from 'Co/GoBack'
const Detail = function (props) {
    let { QUERY_DETAIL, params: { id }, ups, } = props,
        [content, setContent] = useState({}),
        [url, setUrl] = useState(() => ups.get('url')),
        [aa, setA] = useState(false)


    useEffect(() => {
        (async () => {
            try {
                let res = await QUERY_DETAIL({ id: id, url: ups.get('url') })
                /*******
                 * 问题: 
                 * setContent({ ...props.moveDetail });
                 *  执行ajax后, props 因为redux自动更新,但是此时的props因为effect [] 的原因是上一次的函数上下文,所以此处props.moveDetal还是之前的null
                 * */

                if (ups.get('url') === 'bookDetailUrl') {
                    setContent({ ...res.bookDetail });    //  因为用了useEffect 所以不能直接从props获取, 因为闭包的原因,这个moveDetail是上一次上下文
                } else {
                    setContent({ ...res.moveDetail });    //  因为用了useEffect 所以不能直接从props获取, 因为闭包的原因,这个moveDetail是上一次上下文
                }

            } catch (error) {
                Toast.show({
                    icon: 'fail',
                    content: '获取详情失败',
                    duration: 3000,
                })
            }
        })()

    }, [])

    const messageOutlineClick = function () {
        setContent({
            ...content, rating: {
                count: !content.rating.isValue ? ++content.rating.count : --content.rating.count,
                vote: content.rating.vote,
                like: content.rating.like,
                isValue: !content.rating.isValue,
                isVote: content.rating.isVote,
                isLike: content.rating.isLike,
            }
        })

    }

    const likeOutlineClick = function () {
        setContent({
            ...content, rating: {
                count: content.rating.count,
                vote: !content.rating.isVote ? ++content.rating.vote : --content.rating.vote,
                like: content.rating.like,
                isValue: content.rating.isValue,
                isVote: !content.rating.isVote,
                isLike: content.rating.isLike,
            }
        })
    }
    const starOutlineClick = function () {
        setContent({
            ...content, rating: {
                count: content.rating.count,
                vote: content.rating.vote,
                like: !content.rating.isLike ? ++content.rating.like : --content.rating.like,
                isValue: content.rating.isValue,
                isVote: content.rating.isVote,
                isLike: !content.rating.isLike,
            }
        })
    }
    const waitForClick = function () {
        Toast.show({
            icon: '',
            content: '待开发',
            duration: 3000,
        })
    }

    return (
        <>
            <div className="detail-box">
                <GoBack />
                { /*内容*/}
                <div className="content">
                    {url?.indexOf('moveDetailUrl') > -1 ?
                        <div>
                            <Image src={content?.pic?.large} />
                            <div className="conent-detail">
                                <div className="move-title">影片名称:{content?.title}</div>
                                <div className="move-des" >影片分类:
                                    <span className="">{content?.genres}</span>
                                </div>
                                <div className="" ><span className="move-des">影片主演:</span>{(content?.actors || []).map((e, index) => {
                                    return <Space key={index}><span className="move-actors">{e.name}</span></Space>
                                })} </div>
                                <div  >影片评分:
                                    <Rate key={content?.rating?.star_count} allowHalf defaultValue={content?.rating?.star_count} className={content?.ratingC + 1} />
                                </div>
                                <div className="move-des" >影片简介: </div>
                                <div className="move-intro" >
                                    {content?.intro}
                                </div>
                            </div>
                        </div> :
                        <div className="bookDetail">
                            <div>
                                <div dangerouslySetInnerHTML={{ __html: content?.intro }}></div>
                            </div>
                        </div>
                    }
                </div>


                <div className="tab-bar">
                    <div className="icons" >
                        <div>
                        </div>
                        <div onClick={messageOutlineClick} ><Badge content={content?.rating?.count} color='transparent' ><BellOutline color={content?.rating?.isValue ? 'var(--adm-color-primary)' : ''} /></Badge></div>
                        <div onClick={likeOutlineClick} ><Badge content={content?.rating?.vote} color='transparent' ><LikeOutline color={content?.rating?.isVote ? 'var(--adm-color-primary)' : ''} /></Badge></div>
                        <div onClick={starOutlineClick} ><Badge content={content?.rating?.like} color='transparent'><StarOutline color={content?.rating?.isLike ? 'var(--adm-color-primary)' : ''} /></Badge></div>
                        <div onClick={waitForClick} ><span ><MoreOutline /></span></div>
                    </div>
                </div>

            </div>


        </>
    )

}

export default connect(
    (store) => store.detail,
    action.detail)(Detail)

